<script setup>
import { reactive, ref } from 'vue'
import { useTransition } from '@vueuse/core'
import Echarts from '../../components/Echarts.vue'

//左侧表格的数据
const totalDegreeData = ref(0)
const normalData = ref(0)
const benignData = ref(0)
const malignantData = ref(0)
const totalDegree = useTransition(totalDegreeData, {
    duration: 1500
})
const normal = useTransition(normalData, {
    duration: 1500
})
const benign = useTransition(benignData, {
    duration: 1500
})
const malignant = useTransition(malignantData, {
    duration: 1500
})

totalDegreeData.value = 70
benignData.value = 30
malignantData.value = 20
normalData.value = 20
const advice = reactive([
    '肺实质内无异常密度增高区域',
    '支气管壁光滑，无狭窄或扩张',
    '没有胸腔积液或其他伴随症状'
])

//右侧表格的数据
const chartOption = reactive({
    // ECharts 配置项

    xAxis: {
        max: 'dataMax'
    },
    yAxis: {
        type: 'category',
        data: ['总次数', '正常', '良性', '恶性'],
        inverse: true,
        animationDuration: 300,
        animationDurationUpdate: 300
        // max: 2 //设置限制了 Y 轴显示的最大类别数为 2，因此只会显示最大的 3 个条形图（因为索引从 0 开始）。
    },
    series: [
        {
            realtimeSort: true, //启用实时排序，数据更新时条形图会自动重新排序。
            name: '检查统计', //设置系列的名称为 'X'，通常用于图例和工具提示。
            type: 'bar',
            data: [
                {
                    value: 70,
                    itemStyle: {
                        color: 'orange' // 设置 "总次数" 的颜色为红色
                    }
                },
                20,
                30,
                20
            ],
            label: {
                show: true,
                position: 'right',
                valueAnimation: true
            }
        }
    ],
    legend: {
        top: 20,
        show: true
    },
    animationDuration: 1500,
    animationDurationUpdate: 3000,
    animationEasing: 'linear',
    animationEasingUpdate: 'linear'
})

// import { saveAs } from 'file-saver'
import * as XLSX from 'xlsx'

const exportToExcel = (data) => {
    // 历史记录
    let arr = [
        {
            name: '张三',
            imgUrl: 'https://img.js.design/assets/img/66446848601c0a29c7ac621d.png#f3acb12a1234c615e6c54b0b7fa213f5',
            time: '2022-01-01',
            diagnose: '正常',
            advice: '边缘较为光滑、圆润，形状规则。密度相对均匀，可能呈现钙化点。不会引起周围组织结构显著改变。在增强扫描中，强化程度较低或无明显强化'
        },
        {
            name: '张三',
            imgUrl: 'https://img.js.design/assets/img/66446848601c0a29c7ac621d.png#f3acb12a1234c615e6c54b0b7fa213f5',
            time: '2022-01-01',
            diagnose: '正常',
            advice: '边缘较为光滑、圆润，形状规则。密度相对均匀，可能呈现钙化点。不会引起周围组织结构显著改变。在增强扫描中，强化程度较低或无明显强化'
        },
        {
            name: '张三',
            imgUrl: 'https://img.js.design/assets/img/66446848601c0a29c7ac621d.png#f3acb12a1234c615e6c54b0b7fa213f5',
            time: '2022-01-01',
            diagnose: '正常',
            advice: '边缘较为光滑、圆润，形状规则。密度相对均匀，可能呈现钙化点。不会引起周围组织结构显著改变。在增强扫描中，强化程度较低或无明显强化'
        },
        {
            name: '张三',
            imgUrl: 'https://img.js.design/assets/img/66446848601c0a29c7ac621d.png#f3acb12a1234c615e6c54b0b7fa213f5',
            time: '2022-01-01',
            diagnose: '正常',
            advice: '边缘较为光滑、圆润，形状规则。密度相对均匀，可能呈现钙化点。不会引起周围组织结构显著改变。在增强扫描中，强化程度较低或无明显强化'
        },
        {
            name: '张三',
            imgUrl: 'https://img.js.design/assets/img/66446848601c0a29c7ac621d.png#f3acb12a1234c615e6c54b0b7fa213f5',
            time: '2022-01-01',
            diagnose: '正常',
            advice: '边缘较为光滑、圆润，形状规则。密度相对均匀，可能呈现钙化点。不会引起周围组织结构显著改变。在增强扫描中，强化程度较低或无明显强化'
        }
    ]
    // 定义列标题
    const headers = ['姓名', '图片URL', '日期', '诊断', '建议']

    // 创建一个样式对象
    const titleStyle = {
        font: {
            bold: true, // 设置字体为加粗
            sz: 14, // 字体大小
            color: { rgb: 'FF0000' } // 字体颜色（可选）
        }
    }
    // 创建工作表
    const worksheet = XLSX.utils.aoa_to_sheet(
        //用于将二维数组（Array of Arrays，简称 AOA）转换为 Excel 工作表对象
        [
            headers.map((header) => ({
                v: header, // 单元格的值
                t: 's', // 单元格类型为字符串
                s: titleStyle // 应用样式
            }))
        ].concat(
            arr.map((item) => [
                item.name,
                item.imgUrl,
                item.time,
                item.diagnose,
                item.advice
            ])
        )
    )

    /*    // 将数据转换为工作簿
    const worksheet = XLSX.utils.json_to_sheet(arr, {   //将 JavaScript 对象数组（JSON 格式）转换为 Excel 工作表对象
        header: headers.map((h) => h.title), // 使用自定义的列标题
        skipHeader: true // 跳过数据中的原始标题
    }) //库提供的一个方法，它接受一个 JSON 对象数组并返回一个工作表对象。 */
    const workbook = XLSX.utils.book_new() //用于初始化一个空的工作簿
    XLSX.utils.book_append_sheet(workbook, worksheet, 'Sheet1') //这行代码将之前创建的工作表 worksheet 添加到工作簿 workbook 中。工作簿对象、工作表对象和工作表的名称（在这里是 'Sheet1'）。

    // 导出工作簿为 Excel 文件
    XLSX.writeFile(workbook, '诊断系统历史记录.xlsx')
}
</script>

<template>
    <el-header class="user-login-nav">
        <div class="system-title">肺癌诊断系统</div>
        <div class="system-title">历史记录</div>
    </el-header>
    <div class="container">
        <div class="top">
            <div class="top_title">病人病例记录详情</div>
            <el-button type="primary" @click="exportToExcel"
                >导出报告</el-button
            >
        </div>
        <div class="statistics">
            <div class="left" style="width: 50%">
                <el-row>
                    <el-col :span="6">
                        <el-statistic title="总次数" :value="totalDegree" />
                    </el-col>
                    <el-col :span="6">
                        <el-statistic title="正常" :value="normal" /> </el-col
                    ><el-col :span="6">
                        <el-statistic title="良性" :value="benign" /> </el-col
                    ><el-col :span="6">
                        <el-statistic title="恶性" :value="malignant" />
                    </el-col>
                </el-row>
            </div>
            <div class="right">
                <Echarts
                    :option="chartOption"
                    style="
                        height: 100%;
                        width: 100%;
                        z-index: 2;
                        position: relative;
                    "
                />
            </div>
        </div>

        <div class="history">
            <div class="history_item">
                <div class="picture">
                    <img
                        class="detection_picture"
                        src="../../assets/images/肺癌图片.jpg"
                        alt=""
                    />
                    <div class="user_name">张三</div>
                </div>
                <div class="time">
                    <img class="icon" src="../../assets/icon/time.png" alt="" />
                    <span class="small_text">就诊时间</span>
                    <span class="big_text">2022-01-01</span>
                </div>
                <div class="static">
                    <div class="static_left">
                        <img
                            class="icon"
                            src="../../assets/icon/static.png"
                            alt=""
                        />
                        <span class="small_text">病情基本状况</span>
                        <span class="big_text" style="font-size: 50px"
                            >正常</span
                        >
                        <el-progress :percentage="50" :stroke-width="13"
                            >&nbsp;
                        </el-progress>
                    </div>
                    <div class="static_right">
                        <div
                            class="advice"
                            v-for="(item, index) in advice"
                            :key="index"
                        >
                            {{ item }}
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="color"></div>
    </div>
</template>

<style scoped>
.color {
    z-index: 1;
    position: absolute;
    top: 400px;
    left: 50%;
    width: 509.06px;
    height: 156.52px;
    opacity: 1;
    transform: rotate(31.71deg);
    background: linear-gradient(
        90deg,
        rgba(251, 2, 251, 0.269) 0%,
        rgba(0, 128, 255, 0.312) 45.84%,
        rgba(21, 0, 255, 0.1) 100%
    );
    filter: blur(100px);
}

.user-login-nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 20px;
}

.system-title {
    margin: 0 100px;
    font-size: 36px;
    font-weight: bold;
    color: #333;
}

.container {
    position: relative;
    width: 90%;
    margin: 85px auto;
}

.top {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.top_title {
    font-size: 30px;
    font-weight: 550;
    color: #333;
}

.statistics {
    display: flex;
    align-items: center;
    margin-top: 50px;
    border-radius: 50.33px;
    background: rgba(250, 250, 250, 1);
    height: 500px;
    border: 1px solid rgba(0, 0, 0, 1);
}
.el-col {
    text-align: center;
}

:deep(.el-statistic__head) {
    margin-bottom: 40px;
    font-size: 36px;
    font-weight: 400;
    letter-spacing: 0px;
    line-height: 52.13px;
    color: rgba(0, 0, 0, 1);
}

:deep(.el-statistic__content) {
    font-size: 28px;
    font-weight: 400;
    color: rgba(31, 31, 31, 1);
}
.right {
    width: 50%;
    height: 100%;
}
.history_item {
    display: flex;
    justify-content: left;
    align-items: center;
    margin: 40px auto;
    border-radius: 50.33px;
    background: rgba(250, 250, 250, 1);
    height: 350px;
    border: 1px solid rgba(0, 0, 0, 1);
}

.picture {
    position: relative;
    border-radius: 12px;
    overflow: hidden;
    margin-left: 30px;
    aspect-ratio: 1; /* 保持宽高比为 1:1 */
    height: 90%;
}
.picture .detection_picture {
    width: 100%;
    height: 100%;
}
.user_name {
    position: absolute;
    top: 1px;
    left: 10px;
    background-color: #d3d5d9;
    padding: 0 20px;
    border-radius: 5px;
}

.time {
    display: flex;
    flex-direction: column;
    margin-left: 100px;
    width: 18%;
    height: 100%;
    /* background-color: blanchedalmond; */
}

.static {
    height: 100%;
    width: 50%;
    /* background-color: blanchedalmond; */
}

.icon {
    margin-top: 50px;
    width: 50px;
    aspect-ratio: 1; /* 保持宽高比为 1:1 */
}

.small_text {
    font-weight: 550;
    font-size: 25px;
    margin-top: 30px;
}

.big_text {
    font-size: 45px;
    font-weight: 600;
    margin-top: 30px;
}

.static {
    display: flex;
    justify-content: space-around;
}

.static_left {
    width: 30%;
    display: flex;
    flex-direction: column;
}

.el-progress--line {
    margin-top: 20px;
    max-width: 300px;
    margin-left: -10px;
}

.static_right {
    align-self: center;
}

.advice {
    margin-right: 150px;
    margin-top: 20px;
    font-size: 23px;
}
</style>
